<template>
	<view>
		<Lines></Lines>
		<view class="list">
			<scroll-view scroll-y="true" class="list-left" :style="'height:'+clentHeight+'px;'">
				<view class="left-item">
					<view class="left-name left-name-active">1</view>
					<view class="left-name">2</view>
					<view class="left-name">3</view>
					<view class="left-name">2</view>
					<view class="left-name">3</view>
					<view class="left-name">2</view>
					<view class="left-name">3</view>
					<view class="left-name">2</view>
					<view class="left-name">3</view>
					<view class="left-name">2</view>
					<view class="left-name">3</view>
					<view class="left-name">2</view>
					<view class="left-name">3</view>
					<view class="left-name">3</view>
					<view class="left-name">2</view>
					<view class="left-name">3</view>
					<view class="left-name">2</view>
					<view class="left-name">3</view>
					<view class="left-name">2</view>
					<view class="left-name">3</view>
					<view class="left-name">2</view>
					<view class="left-name">3</view>
				</view>
			</scroll-view>
			<scroll-view scroll-y="true" class="list-right" :style="'height:'+clentHeight+'px;'">
				<view>2</view>
			</scroll-view>
		</view>
	</view>
</template>

<script>
	import Lines from "@/components/common/Lines.vue";
	export default {
		data() {
			return {
				clentHeight: 0
			}
		},
		//获取可视高度
		onReady() {
			uni.getSystemInfo({
				success: (res) => {
					this.clentHeight = res.windowHeight;
				}
			})
		},
		components: {
			Lines
		},
		methods: {
			//获取可视区域高度【兼容】
			getclientHeight(){
				const res = uni.getSystemInfoSync();
				const system = res.platform;
				if(system === 'ios'){
					return 44 + res.statusBarHeight;
				}else if(system === 'android'){
					return 48 + res.statusBarHeight;
				}else{
					return 0;
				}
			},
		}
	}
</script>

<style scoped>
.list{
	display: flex;
}
.list-left{
	width: 200rpx;
	background-color: #F7F7F7;
}
.left-item{
	font-size: 27rpx;
	background-color: #F7F7F7;
}
.left-name{
	padding: 26rpx 6rpx;
	text-align: center;
}
.left-name-active{
	border-left: 8rpx solid #49BDFB;
	background-color: #FFFFFF;
}
.list-right{
	flex: 1;
}
</style>
